<script setup >
import { computed } from 'vue'

const props = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])

const value = computed({
  get() {
    return props.modelValue
  },
  set(value) {
    emit('update:modelValue', value)
  }
})
</script>
<template>
    <input class="input" v-model="value"  />
</template>
<style scoped>

.input {
    width: 100%;
    height: 35px;
    display: inline-block;
    padding: 5px 10px;
    border: none;
    background-color: #f1f1f1;
    letter-spacing: 1px;
    font-size: 16px;
    line-height: 30px;

}

.input:focus {
    outline: none;
    background-color: #C0C4CC;
}
</style>